<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_764721_203phjxz6d.css">
    <link rel="stylesheet" href="css/swiper-4.3.3.min.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/swiper-4.3.3.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/register.js"></script>
</head>
<body>
<a name="h1"></a>
<div id="header"></div>
<hr class="clearfix">
<div class="register">
    <div class="registerleft">
        <form class="registerbody" action="php/register.php" method="post">
            <div class="reinput">
                <b><i>*</i>手机号</b>
                <input class="inpt1" type="text" name="Uname" placeholder="请输入11位有效手机号">
                <!--<em id="emPhoneNo" style="" class="e1">请输入11位有效手机号</em>-->
            </div>
            <div class="reinput">
                <b><i>*</i>图片验证码</b>
                <!--<input class="inpt2" type="text" name="Uname" placeholder="请输入图片验证码">-->
                <div class="new-web-row">
                <input type="text" name="webforminput" class="web-form-input" required="required" id="Yzm" placeholder="请输入图片验证码" style="width: 138px;">
                <input type ="button" id="code" value="点我验证" class="btn-list-btn" onclick="createCode()" style="width: 110px;height: 40px"/>
                </div>
                <em class="emPicCode" id="emPicCode" value="2313213213"></em>
            </div>
            <div class="reinput">
                <b><i>*</i>设置密码</b>
                <input class="inpt3" type="password" name="Upwd" placeholder="请输入6-16个字符" id="Upwd">
                <!--<em id="emPass" style="" class="e1">请输入密码</em>-->
            </div>
            <div class="reinput">
                <b><i>*</i>确认密码</b>
                <input class="inpt4" type="password" name="Upwd2" placeholder="请输入确认密码" id="Upwd2">
                <!--<em id="emPassConfirm" style="" class="e1">请输入确认密码</em>-->
            </div>
            <div class="reinput">
                <b><i>*</i>验证码</b>
                <input class="inpt5" type="text" name="Uyzm" placeholder="">
                <input type="button" id="btnCode" num="202020-button-1" value="获取验证码"></input>
                <em id="emValidCode" style="/* display:none */"></em>
            </div>
            <p>
                <label for="btnAgree" num="202020-label-1"><input type="checkbox" id="btnAgree" checked="checked" value="">我已阅读并同意<a style="cursor:pointer;" href="http://www.jyh.com/IndexMain.html?u=Help&amp;cid=44971604001000010005" class="on" num="202020-1">《会员注册协议》</a>和<a style="cursor:pointer;" class="on" href="http://www.jyh.com/IndexMain.html?u=Help&amp;cid=44971604001000010005" num="202020-2">《隐私保护政策》</a></label>
            </p>
            <div class="zcbtn">
                <input type="submit" class="submit" value="注册">
            </div>
            <font>
                <a style="cursor:pointer;" href="login.html" >我已注册，立即登录</a>
            </font>
        </form>
    </div>
    <div class="registerright">
        <a href=""><img src="image/login.jpg" alt=""></a>
    </div>

</div>
<div class="side-fix">
    <a class="side-div1" href="">
        <i class="iconfont icon-phone"></i>
        <div class="erwm">
            <ul>
                <li><img src="image/2wm.png" alt=""></li>
                <li>家有购物微信</li>
            </ul>
        </div>
    </a>
    <br>

    <a href="" class="side-div2">
        <i class="iconfont icon-wechat"></i>
        <div class="erwm1">
            <ul>
                <li><img src="image/2wm.png" alt=""></li>
                <li>家有购物微信</li>
            </ul>
        </div>
    </a>

    <br>
    <div class="back-to-top">
        <a href="#h1">
            <i class="iconfont icon-shang"></i>
        </a>
    </div>
</div>
<div id="foot"></div>
</body>
</html>
<script>

    var code ; //在全局定义验证码
    //产生验证码
    function createCode(){
        code = "";
        var codeLength = 4;//验证码的长度
        var checkCode = document.getElementById("code");
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//随机数
        for(var i = 0; i < codeLength; i++) {//循环操作
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
            code += random[index];//根据索引取得随机数加到code上
        }
        checkCode.value = code;//把code值赋给验证码
    }
    //校验验证码
    document.getElementById("Yzm").addEventListener("change",validate);

    function validate(){
        var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
        if(inputCode.length == 0) { //若输入的验证码长度为0
            $("#emPicCode").text("验证码不能为空！"); //则弹出请输入验证码
            $("#Yzm").focus();
            YZM = false;
        }
        else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
            $("#emPicCode").text("验证码输入错误！@_@"); //则弹出验证码输入错误
            createCode();//刷新验证码
            $("#Yzm").val("");//清空文本框
            $("#Yzm").focus();//重新聚焦验证码框
            YZM = false;
        }
        else { //输入正确时
            $("#emPicCode").text("√");
            $("#Yzm").blur();//绑定验证码输入正确时要做的事
            YZM = true;

        }
    };

</script>